<template>
  <header>
    <!-- 搜索部分 -->
    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" autofocus shape="round"/>
    <!-- 下拉菜单部分 -->
    <van-dropdown-menu swipe-threshold="4">
      <van-dropdown-item v-model="item.value" :options="item.options" v-for="item in dropData" :key="item.value" />
    </van-dropdown-menu>
  </header>
  <main>
    <!-- 商品展示部分 -->
    <van-card :num="item.saleNum" :price="item.price" :origin-price="item.originPrice" :title="item.title"
      :thumb="item.image"
      v-for="item in goodsData" :key="item.id">
      <template #tags>
        <van-tag plain type="primary" v-show="item.couponValue">{{ item.couponValue }}</van-tag>
        有效期至 2025-4-16
      </template>
      <template #footer>
        <van-icon name="cart-o" size="20"/>
      </template>
    </van-card>
  </main>
  <footer>
    <div v-if="!isEnd && goodsData.length>=1" @click="loadMore">加载更多...</div>
    <div v-show="isEnd">已经到底了</div>
  </footer>
</template>

<script setup lang="ts">
import router from '@/router';
import { ref } from 'vue';
import { searchByKeywords } from '@/api/search'
//搜索部分
const value = ref('')

const onCancel = () => {
  router.back()
}
//下拉菜单部分
const dropData = [
  {
    value: 0,
    options: [
      { text: '全部商品', value: 0 },
      { text: '新款商品', value: 1 },
      { text: '活动商品', value: 2 },
    ]
  },
  {
    value: 0,
    options: [
      { text: '综合', value: 0 },
      { text: '按销量排序', value: 1 },
      { text: '按价格排序', value: 2 },
    ]
  },
  {
    value: 0,
    options: [
      { text: '厂家', value: 0 },
      { text: ' 厂家A', value: 1 },
      { text: '厂家B', value: 2 },
    ]
  },
  {
    value: 0,
    options: [
      { text: '商家', value: 0 },
      { text: '商家A', value: 1 },
      { text: '商家B', value: 2 },
    ]
  },
]
//商品数据
const goodsData = ref([])
const startIndex = ref(0)
const isEnd = ref(false)
const onSearch = async() => {
  const result = await searchByKeywords(value.value,startIndex.value)
    for(let i=0;i<result.list.length;i++){
      goodsData.value.push(result.list[i])
    }
  // goodsData.value = result.list
  startIndex.value = result.nextIndex
  isEnd.value = result.isEnd
}
//加载更多
const loadMore = ()=>{
  onSearch()
}
</script>

<style lang="less" scoped>
footer{
  text-align: center;
}
</style>
